<template>
  <div>
    <h1>这是特斯汀{{ $route.meta.title }}组件</h1>
    <ul>
      <li>
        <router-link to="/school/student?name=roy&age=33"
          >通过routerlink的to传参调用学生</router-link
        >
      </li>
      <li>
        <router-link to="/school/student/roy/33"
          >通过routerlink的to路径传参调用学生</router-link
        >
      </li>
      <li>
        <router-link :to="`/school/student/${student.name}/${student.age}`"
          >通过to读取变量拼接模板字符串完成params传参</router-link
        >
      </li>
      <li>
        <router-link
          :to="`/school/student/?name=${student.name}&age=${student.age}`"
          >通过to读取变量拼接模板字符串完成query传参</router-link
        >
      </li>
      <h3>通过name属性简化多级路由的调用</h3>
      <li>
        <RouterLink
          :to="{ path: '/school/student', query: { name: 'IHL', age: '18' } }"
          >通过v-bind形式传路由对象的query参数给to来跳转</RouterLink
        >
      </li>
      <li>
        <RouterLink
          :to="{ name: 'student', params: { name: student.name, age: student.age } }"
          >通过v-bind形式传路由对象的param参数给to来跳转</RouterLink
        >
      </li>
      <li @click="gotoStudent">学生信息</li>
      <li @click="gotoStudentName">通过name对象格式传递学生信息</li>
      <hr />
      <li @click="gotoTeacher">老师信息</li>
      <li>
        <router-link to="/school/teacher/will/35"
          >通过routerlink的to路径传参调用老师</router-link
        >
      </li>
      <li>
        <router-link to="/school/teacher?name=roy&course=java"
          >urlencode格式传参调用老师</router-link
        >
      </li>
      <hr />
      <li @click="forwardrouter">前进</li>
      <li @click="backrouter">后退</li>
      <li @click="jump">跳几步</li>
    </ul>
    <RouterView></RouterView>
    <!-- <Teacher></Teacher> -->
  </div>
</template>

<script setup lang="ts">
// import router from "@/router";
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
const router = useRouter();

const teacher = reactive({ name: "土匪", course: "性能" });
const student = reactive({ name: "卡卡", age: "28" });

function gotoStudent() {
  router.push("/school/student");
}

function gotoStudentName() {
  router.push({ name: "student", params: { name: "IHL", age: "18" } });
}

function gotoTeacher() {
  router.push("/school/teacher");
}

function forwardrouter() {
  router.forward();
}

function backrouter() {
  router.back();
}

function jump() {
  router.go(-3);
}
</script>

<style scoped></style>
